<script lang="ts" setup>
import { computed } from 'vue'
import { useGlobalState } from './Hooks/useGlobalState'
import Child1 from './components/Child1.vue'
const state = useGlobalState()

import { useState } from './Hooks/useState'
import Child2 from './components/Child2.vue'
const state2 = useState()

// provide出所有状态 才能在子组件中inject去用
import { useProvideCounterStore } from './Hooks/useCounterStore'
useProvideCounterStore(0)
import Child3 from './components/Child3.vue'
</script>
<template>
    <div class="store-container">
        <div>共享状态管理--createGlobalState--将状态保存全局作用域中，以便跨Vue实例复用。</div>
        <el-button @click="state.increment">自增</el-button>
        <div>count: {{  state.count }}</div>
        <div>doubleCount: {{  state.doubleCount }}</div>
        <Child1></Child1>

        <br /><br /><hr /><br /><br />
        <div>非共享状态管理--useState--hook</div>
        <el-button @click="state2.increment">自增</el-button>
        <div>count: {{  state2.count }}</div>
        <div>doubleCount: {{  state2.doubleCount }}</div>
        <Child2></Child2>
        <br /><br /><hr /><br /><br />
        <div>共享状态管理--createInjectionState--创建可以注入到组件中的全局状态</div>
        <Child3></Child3>
    </div>
</template>
<style scoped>
.store-container {

}
</style>